<template>
  <!-- 质量检查情况 -->
  <a-spin :spinning="loading">
    <a-card>
      <title-name :title="`${$route.query.month}月质量检查情况`"></title-name>
      <!-- 统计 -->
      <!-- <Empty v-if="!baseInfo.checks || !baseInfo.checks.length" description="暂无数据" />
      <template v-else>
        <a-card class="mb20">
          本月各分公司共计检查项目个数：<a>{{ baseInfo.projectNum || 0 }}</a
          >个<a-divider type="vertical" />整改通知单份数：<a>{{ baseInfo.noticeNum || 0 }}</a
          >份<a-divider type="vertical" />整改问题数：<a>{{ baseInfo.problemNum || 0 }}</a
          >条<a-divider type="vertical" />平均每整改单问题数：<a>{{ baseInfo.problemNoticeNum || 0 }}</a
          >条
        </a-card>
        <a-table rowKey="id" class="mb20" bordered :pagination="false" :columns="columns" :dataSource="baseInfo.checks"></a-table>
      </template> -->
      <!-- 详情列表 -->
      <div v-if="baseInfo.checkNoticeDetails">
        <div v-for="(item, key) in baseInfo.checkNoticeDetails" :key="key">
          <div class="branchName">{{ key }}</div>
          <div>
            <Empty v-if="!item.length" description="暂无数据" />
            <a-table v-else rowKey="id" bordered :pagination="false" :columns="columns2" :dataSource="item">
              <!-- 主要整改问题 -->
              <template slot="problemDescription" slot-scope="text">
                <div v-for="(item, index) in formatList(text)" :key="index">{{ index + 1 + '、' + item }}</div>
              </template>
            </a-table>
          </div>
        </div>
      </div>
      <Empty v-else description="暂无数据" />
    </a-card>
    <!-- 编辑质量检查情况 -->
    <DialogForm ref="dialogForm" :visible.sync="visible" edit-model="E" headerTitle="编辑质量检查情况" :width="1000" :form="form" :formList="formList" :rules="rules" @confirm="submitForm" />
  </a-spin>
</template>

<script>
import { getCheckSelf, updateCheck } from '@/api/quality/qualityMonth' // api
import { Empty } from 'ant-design-vue' // 无数据提示
import DialogForm from '@/components/DialogForm' // 表单弹窗

const columns2 = [
  {
    title: '序号',
    width: 80,
    align: 'center',
    dataIndex: 'index',
    customRender() {
      // 合计行不需要序号
      return arguments[1].id !== '0' ? arguments[2] + 1 : ''
    }
  },
  {
    title: '项目名称',
    width: 230,
    dataIndex: 'projectName'
  },
  {
    title: '整改问题数',
    width: 130,
    align: 'center',
    dataIndex: 'problemNum'
  },
  {
    title: '主要整改问题',
    dataIndex: 'problemDescription',
    width: 230,
    scopedSlots: { customRender: 'problemDescription' }
  },
  {
    title: '检查人',
    dataIndex: 'checker'
  }
]
export default {
  name: 'QualityCheckSituation',
  props: {
    // 请求参数
    queryParam: {
      type: Object,
      default: () => null
    }
  },
  components: {
    Empty,
    DialogForm
  },
  data() {
    this.columns2 = columns2
    return {
      loading: false, // 加载控件
      form: {}, // 编辑表单
      visible: false, // 弹窗显隐控件
      rules: {
        mark: [{ required: true, whitespace: true, message: '请输入备注', trigger: 'change' }]
      }, // 校验规则
      formList: [{ type: 'BaseTextarea', keyName: 'mark', label: '备注', span: 24 }], // 弹窗表单配置项
      baseInfo: {} // 详情
    }
  },
  computed: {
    // 统计表头
    columns() {
      let columns = [
        {
          title: '序号',
          width: 80,
          align: 'center',
          dataIndex: 'index',
          customRender() {
            // 合计行不需要序号
            return arguments[1].id !== '0' ? arguments[2] + 1 : ''
          }
        },
        {
          title: '分公司名称',
          dataIndex: 'branchComName'
        },
        {
          title: '检查项目个数',
          dataIndex: 'checkProjectNum'
        },
        {
          title: '整改通知单份数',
          dataIndex: 'rectifierNoticeNum'
        },
        {
          title: '整改问题数',
          dataIndex: 'rectifierProblemNum'
        },
        {
          title: '问题/整改单',
          dataIndex: 'problemNotice'
        },
        {
          title: '备注',
          width: 230,
          dataIndex: 'mark'
        }
      ]
      // 节点若为分公司则添加操作按钮
      this.queryParam.branchComId && (this.$route.query.editModel == 2 || this.$route.query.editModel == 4) &&
        columns.push({
          title: '操作',
          dataIndex: 'actions',
          width: '80px',
          align: 'center',
          customRender: (text, record) => {
            return (
              record.id != '0' && (
                <a
                  onClick={() => {
                    this.form.mark = record.mark
                    this.form.id = record.id
                    this.visible = true
                  }}
                >
                  编辑
                </a>
              )
            )
          }
        })
      return columns
    }
  },
  mounted() {
    // 初始化
    this.init()
  },
  methods: {
    /**
     * 格式化列表
     */
    formatList(text) {
      return text?.split(';:,')?.filter((i) => !!i)
    },
    /**
     * 合计
     * list：需要计算的列表
     */
    account(list) {
      return list?.reduce((cur, pre) => Number(cur.problemNum || cur || 0) + Number(pre.problemNum || 0)) ?? 0
    },
    /**
     * 初始化
     */
    init() {
      this.loading = true
      // 请求检查情况
      getCheckSelf(this.queryParam)
        .then((res) => {
          if (res?.code === '0') {
            // 添加合计到统计表格末行
            // res.data.checks?.length &&
            //   res.data.checks.push({
            //     id: '0',
            //     branchComName: '合计',
            //     checkProjectNum: res.data?.projectNum || 0,
            //     rectifierNoticeNum: res.data?.noticeNum || 0,
            //     rectifierProblemNum: res.data?.problemNum || 0,
            //     problemNotice: res.data?.problemNoticeNum || 0
            //   })
            // 添加合计到统计表格末行
            for (let index in res.data?.checkNoticeDetails) {
              let item = res.data.checkNoticeDetails[index]
              item.push({
                id: '0',
                projectName: '合计',
                problemNum: item?.length > 1 ? (this.account(item) || 0) : item[0].problemNum
              })
            }
            this.baseInfo = res.data
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    /**
     * 提交表单
     * form：表单
     */
    submitForm(form) {
      this.$refs.dialogForm.loading = true
      form.qualityMonthId = this.$route.query.id
      form.isAdjust = this.$route.query.isAdjust
      updateCheck(form)
        .then((res) => {
          if (res.code === '0') {
            this.init()
            this.$message.success('编辑成功！')
            this.visible = false
          }
        })
        .finally(() => {
          this.$refs.dialogForm.loading = false
        })
    }
  }
}
</script>
